<template>
  <div class="custom_login">
    <div class="custom_login_content">
      <div class="custom_login_content_header"></div>
      <div class="custom_login_content_content">
        <el-form :rules="rules" :model="login" ref="loginForm">
          <el-form-item prop="account">
            <el-input
              placeholder="输入手机号码"
              type="text"
              v-model="login.account"
              autocomplete="off"
              :disabled="isLoginLoading"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="输入密码"
              type="password"
              v-model="login.password"
              autocomplete="off"
              :disabled="isLoginLoading"
            ></el-input>
          </el-form-item>
          <el-form-item class="down_count" prop="verifyCode">
            <el-input
              placeholder="输入验证码"
              type="text"
              v-model="login.verifyCode"
              prefix-icon="el-icon-chat-line-square"
              autocomplete="off"
              :disabled="isLoginLoading"
            ></el-input>
            <div class="button">
              <el-button
                type="text"
                style="width: 100%"
                v-if="!isDownCount"
                @click="downCountStartHandle"
                >发送验证码</el-button
              >
              <el-button
                type="text"
                style="width: 100%"
                :disabled="true"
                v-else
                >{{ downCountTimeContent }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="isLoginLoading"
              :disabled="isLoginLoading"
              style="width: 100%"
              @click="submitForm('loginForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <el-divider>其他</el-divider>
        <div class="custom_login_content_content_other">
          <a href="">注册</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">忘记密码</a>
        </div>
        <div class="tips">登录等相关问题，请联系管理员。</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      login: {
        account: "",
        password: "",
        verifyCode: "",
        verifyCodeSMS: "",
      },
      isLoginLoading: false,
      button: {
        loading: false,
        disabled: false,
      },
      rules: {
        account: [
          {
            validator: function (rule, value, callback) {
              if (value === "") {
                callback(new Error("请输入登录帐号"));
              } else if (!rule.target.$Plugins.isTelphoneCode(value)) {
                callback(new Error("请输入正确的手机号码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
            target: this,
          },
        ],
        password: [
          {
            validator: function (rule, value, callback) {
              if (value === "") {
                callback(new Error("请输入登录密码"));
              } else if (!rule.target.$Plugins.isPassword(value)) {
                callback(new Error("请输入正确的密码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
            target: this,
          },
        ],
        verifyCode: [
          {
            validator: function (rule, value, callback) {
              if (value === "") {
                callback(new Error("请输入短信验证码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
            target: this,
          },
        ],
      },
      isDownCount: false,
      downCountTime: 60,
      downCountTimeContent: "",
    };
  },
  watch: {
    /* "login.account"(v) {
      console.log(v);
    },
    "login.password"(v) {
      console.log(v);
    },
    "login.verifyCode"(v) {
      console.log(v);
    }, */
    isDownCount(v) {
      if (v) {
        this.downCountHandle();
      }
    },
  },
  beforeDestroy() {
    this.interval && clearInterval(this.interval);
    this.timeout && clearTimeout(this.timeout);
  },
  methods: {
    submitForm(v) {
      let that = this;
      this.$refs[v].validate((valid) => {
        console.log(valid);
        if (valid) {
          if (!this.isDownCount) {
            this.$message("请使用验证码！");
            return false;
          } else if (this.login.verifyCodeSMS !== this.login.verifyCode) {
            this.$message("验证码错误！");
            return false;
          }
          that.isLoginLoading = true;
          that.$token
            .login({ ...that.login })
            /*  that.$store
            .dispatch("loginIn", { ...that.login }) */
            .then((v) => {
              console.log(v);
              that.$router.push("/");
            })
            .catch((v) => {
              console.log(v);
            })
            .finally(() => {
              that.timeout && clearTimeout(that.timeout);
              that.timeout = setTimeout(
                () => (that.isLoginLoading = false),
                500
              );
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    downCountStartHandle() {
      let that = this;
      this.$token
        .getSMSCode({ timestamp: new Date().getTime() })
        /* this.$store
        .dispatch("getSMSCode", { timestamp: new Date().getTime() }) */
        .then((v) => {
          that.login.verifyCodeSMS = v.data.code;
          that.isDownCount = true;
        })
        .catch((v) => {
          that.$message("发送验证码失败");
          console.log(v);
        });
    },
    downCountHandle() {
      let that = this;
      this.interval && clearInterval(this.interval);
      this.interval = setInterval(function () {
        that.downCountTimeContent =
          "（" + that.downCountTime + "秒）后重新发送";
        --that.downCountTime;
        if (that.downCountTime < 0) {
          // that.downCountTimeContent = "重新发送";
          that.downCountTime = 60;
          that.isDownCount = false;
        }
      }, 1000);
    },
  },
};
</script>
<style lang="less">
.custom_login {
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  .custom_login_content {
    background-color: #ffffff;
    box-shadow: #cccccc 0 2px 5px 0;
    .custom_login_content_header {
      height: 100px;
      background-color: #ccc;
    }
    .custom_login_content_content {
      .custom_login_content_content_other {
        padding: 0 0 10px 0;
        a {
          color: #333;
        }
      }
      padding: 20px;
      .down_count {
        width: 100%;
        .el-form-item__content {
          display: flex;
        }
        .el-input {
          flex: 1;
        }
        .button {
          width: 140px;
        }
      }
      .el-divider {
        .el-divider__text.is-center {
          color: #ccc;
        }
      }
      .tips {
        color: #ccc;
      }
    }
    width: 400px;
    min-height: 260px;
    border-radius: 5px;
    overflow: hidden;
  }
}
</style>
